<template>
  <div id="background">
    <div id="contain">
      <h1 style="color: #3d6792">
        <el-icon><Document /></el-icon>注册
      </h1>

      <div class="form">
        <label>用户名：</label><input type="text" v-model.trim="name" /><br />
      </div>
      <div class="form">
        <label>密码：</label
        ><input type="password" v-model.trim="password" /><br />
      </div>
      <div class="form">
        <label>邮箱：</label><input type="email" v-model.trim="mail" /><br />
      </div>
      <div class="form">
        <label>手机号：</label><input type="tel" v-model.trim="phone" /><br />
      </div>
      <el-row justify="center">
        <el-col :span="8"><button @click="handlefinish">提交</button></el-col>
        <el-col :span="8"
          ><button @click.prevent="" class="sil">重置</button></el-col
        >
      </el-row>
      <el-link
        target="warning"
        @click="black"
        style="margin-top: 30px; color: #409eff"
        ><el-icon><Back /></el-icon>返回登录</el-link
      >
    </div>
  </div>
</template>
<script>
import { ElMessage } from "element-plus";
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      name: "",
      password: "",
      mail: "",
      phone: "",
    };
  },
  methods: {
    black() {
      this.$router.push({ name: "Login" });
    },
    handlefinish() {
      if (!this.name) {
        ElMessage({
          message: "名字不能为空",
          type: "warning",
        });
      } else if (!this.password) {
        ElMessage({
          message: "密码不能为空",
          type: "warning",
        });
      } else if (!this.mail) {
        ElMessage({
          message: "邮件不能为空",
          type: "warning",
        });
      } else if (!this.phone) {
        ElMessage({
          message: "手机号不能为空",
          type: "warning",
        });
      } else {
        axios
          .post("http://localhost:8081/user/register", {
            username: this.name,
            password: this.password,
            mail: this.mail,
            phone: this.phone,
          })
          .then((res) => {
            if (res.data && res.data.register == true) {
              ElMessage({
                message: "注册成功",
                type: "success",
              });
            }
          })
          .catch((error) => {
            ElMessage.error("网络错误：" + error);
          });
      }
    },
  },
};
</script>
<style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url("@/assets/01.jpg");
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#contain {
  width: 600px;
  height: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px;
  border: #fdfcfc8e solid 6px;
  text-align: center;
  border-radius: 12px;
}
#contain h1 {
  color: white;
}
.form {
  color: #3d6792;
  margin-left: 15%;
  margin-top: 25px;
  font-size: 18px;
  text-align: left;
}
label {
  float: left;
  width: 5em;
  margin-right: 5px;
  text-align: right;
}
input,
textarea {
  margin-left: 10px;
  padding: 4px;
  border-radius: 5px;
  border: #ffffff8e solid 1px;
  outline: 0;
  /* font: normal 13px/100% Verdana,Tahoma,sans-serif; */
  width: 260px;
  height: 28px;
  background: #ffffff;
  box-shadow: #dcdfe6 0px 0px 8px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
  border-color: #409eff;
}
button {
  position: relative;
  height: 38px;
  width: 100px;
  border: none;
  background: #409eff;
  border-radius: 10px;
  margin-top: 38px;
  box-shadow: none;
  color: rgb(253, 253, 253);
  margin-left: 40px;
}
.sil {
  background-color: #909399;
  color: #ffffff;
}
</style>


  